---
type: tutorial
title: Напишите свой первый пост в блоге в формате Markdown
description: |-
  Руководство: Создайте свой первый блог на Astro —
  Добавьте страницы в формате Markdown на свой сайт
i18nReady: true
---
import Checklist from '~/components/Checklist.astro';
import Blanks from '~/components/tutorial/Blanks.astro';
import Box from '~/components/tutorial/Box.astro';
import MultipleChoice from '~/components/tutorial/MultipleChoice.astro';
import Option from '~/components/tutorial/Option.astro'
import PreCheck from '~/components/tutorial/PreCheck.astro';
import { Steps } from '@astrojs/starlight/components';
import Badge from "~/components/Badge.astro"

Теперь, когда вы создали страницы с помощью файлов `.astro`, пришло время сделать несколько записей в блоге с помощью файлов `.md`!

<PreCheck>
  - Создать новую папку и новый пост
  - Написать несколько постов в формате Markdown
  - Создать ссылки на ваши посты на странице «Блог»
</PreCheck>

## Создайте свой первый файл `.md`.

<Steps>
1. Создайте новую директорию по адресу `src/pages/posts/`.

2. Добавьте новый (пустой) файл `post-1.md` в новую папку `/posts/`.

3. Найдите эту страницу в предварительном просмотре браузера, добавив `/posts/post-1` в конец вашего текущего URL-адреса предварительного просмотра (например, `http://localhost:4321/posts/post-1`).

4. Измените URL-адрес предварительного просмотра в браузере, чтобы вместо него просматривать `/posts/post-2`. (Это страница, которую вы ещё не создали).

   Обратите внимание на разный вывод при предварительном просмотре «пустой» и несуществующей страницы. Это поможет вам устранить проблемы в будущем.
</Steps>

## Напишите содержимое в формате Markdown.

<Steps>
1. Скопируйте или введите следующий код в файл `post-1.md`

    ```markdown title="src/pages/posts/post-1.md"
    ---
    title: 'Моя первая запись в блоге'
    pubDate: 2022-07-01
    description: 'Это первый пост моего нового Astro блога.'
    author: 'Ученик Astro'
    image:
        url: 'https://docs.astro.build/assets/rose.webp'
        alt: 'Логотип Astro на тёмном фоне с розовым свечением.'
    tags: ["astro", "ведение блога", "обучение в открытом доступе"]
    ---
    # Моя первая запись в блоге

    Опубликовано: 01.07.2022

    Добро пожаловать в мой _новый блог_ об изучении Astro! Здесь я буду рассказывать о своем учебном пути, пока я создаю новый сайт.

    ## Чего я добился

    1. **Установка Astro**: Сначала я создал новый проект Astro и настроил свои учётные записи в интернете.

    2. **Создание страниц**: Затем я научился создавать страницы, создавая новые файлы `.astro` и помещая их в папку `src/pages/`.

    3. **Создание записей в блоге**: Это моя первая запись в блоге! Теперь у меня есть страницы Astro и посты в формате Markdown!

    ## Что дальше

    Я завершу учебное пособие по Astro, а затем продолжу добавлять новые записи. Следите за обновлениями.
    ```

2. Проверьте предварительный просмотр браузера по адресу `http://localhost:4321/posts/post-1`. Теперь вы должны увидеть содержимое этой страницы. Возможно, оно ещё не отформатировано должным образом, но не волнуйтесь, вы исправите это позже в процессе обучения!

3. Используйте инструменты разработчика вашего браузера для инспектирования этой страницы. Обратите внимание, что, хотя вы не вводили никаких HTML-элементов, ваш Markdown был преобразован в HTML. Вы можете увидеть такие элементы, как заголовки, параграфы и элементы списка.
</Steps>

:::note
Информация в верхней части файла, внутри разделителей кода (`---`), называется метаданными (frontmatter). Эти данные — включая теги и изображение поста — представляют собой информацию *о* вашем посте, которую Astro может использовать. Она не отображается на странице автоматически, но позже в руководстве вы будете использовать её для улучшения вашего сайта.
:::

## Создайте ссылки на ваши посты

<Steps>
1. Создайте ссылку на ваш первый пост с помощью элемента ссылки в файле `src/pages/blog.astro`:
    ```astro title="src/pages/blog.astro" ins={16-18}
    ---
    ---
    <html lang="ru">
      <head>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width" />
        <title>Astro</title>
      </head>
      <body>
        <a href="/">Главная</a>
        <a href="/about/">О сайте</a>
        <a href="/blog/">Блог</a>

        <h1>Мой блог об изучении Astro</h1>
        <p>Здесь я буду публиковать записи о своем пути изучения Astro.</p>
        <ul>
          <li><a href="/posts/post-1/">Пост 1</a></li>
        </ul>
      </body>
    </html>
    ```

2. Теперь добавьте ещё два файла в `src/pages/posts/`: `post-2.md` и `post-3.md`. Вот небольшой пример кода, который вы можете скопировать и вставить в ваши файлы, или же написать свой!

    ```md title="src/pages/posts/post-2.md"
    ---
    title: Моя вторая запись в блоге
    author: Ученик Astro
    description: "После изучения Astro я не смог остановиться!"
    image:
        url: "https://docs.astro.build/assets/arc.webp"
        alt: "Миниатюра с дугами Astro."
    pubDate: 2022-07-08
    tags: ["astro", "ведение блога", "обучение в открытом доступе", "успехи"]
    ---
    После успешной первой недели изучения Astro я решил попробовать что-то ещё. Я написал и импортировал небольшой компонент по памяти!
    ```

    ```md title="src/pages/posts/post-3.md"
    ---
    title: Моя третья запись в блоге
    author: Ученик Astro
    description: "У меня были некоторые трудности, но обращение к сообществу за помощью действительно помогло!"
    image:
        url: "https://docs.astro.build/assets/rays.webp"
        alt: "Миниатюра с лучами Astro."
    pubDate: 2022-07-15
    tags: ["astro", "обучение в открытом доступе", "неудачи", "сообщество"]
    ---
    Не всё всегда шло гладко, но мне нравится создавать проекты с Astro. И [сообщество в Discord](https://astro.build/chat) очень дружелюбное и полезное.
    ```

3. Добавьте ссылки на эти новые посты:

    ```astro title="src/pages/blog.astro" ins={18-19}
    ---
    ---
    <html lang="ru">
      <head>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width" />
        <title>Astro</title>
      </head>
      <body>
        <a href="/">Главная</a>
        <a href="/about/">О сайте</a>
        <a href="/blog/">Блог</a>

        <h1>Мой блог об изучении Astro</h1>
        <p>Здесь я буду публиковать записи о своем пути изучения Astro.</p>
        <ul>
          <li><a href="/posts/post-1/">Пост 1</a></li>
          <li><a href="/posts/post-2/">Пост 2</a></li>
          <li><a href="/posts/post-3/">Пост 3</a></li>
        </ul>
      </body>
    </html>
    ```

4. Проверьте предварительный просмотр в браузере и убедитесь, что:

    Все ваши ссылки на Пост 1, Пост 2 и Пост 3 ведут на рабочие страницы на вашем сайте. (Если вы обнаружите ошибку, проверьте ваши ссылки в `blog.astro` или имена ваших файлов Markdown.)
</Steps>


<Box icon="question-mark">
### Проверьте свои знания

1. Содержимое в файле Markdown (`.md`) преобразуется в:
    <MultipleChoice>
        <Option isCorrect>HTML</Option>
        <Option>CSS</Option>
        <Option>JavaScript</Option>
    </MultipleChoice>
</Box>

<Box icon="check-list">
## Контрольный список

<Checklist>
- [ ] Я умею создавать новые папки внутри `src/pages/` для моих постов.
- [ ] Я умею создавать новые файлы постов для блога в формате Markdown (`.md`).
- [ ] Я понимаю, что Markdown — это ещё один язык, который, как и Astro, преобразуется в HTML в моем браузере.
</Checklist>
</Box>

### Ресурсы

- [Шпаргалка по Markdown от The Markdown Guide](https://www.markdownguide.org/cheat-sheet/) <Badge class="neutral-badge" text="внешняя ссылка" />

- [Что такое инструменты разработчика браузера? MDN](https://developer.mozilla.org/ru/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools) <Badge class="neutral-badge" text="внешняя ссылка" />

- [Метаданные YAML](https://assemble.io/docs/YAML-front-matter.html) <Badge class="neutral-badge" text="внешняя ссылка" />
